<template>
	<view class="footerbar flex">
		<!-- <view class="item">
			<view class="icon"></view>
			<view>手动</view>
		</view> -->
		<view class="item" @tap="deviceTest">
			<view class="icon" :class="[iconType.cls]">
				<image v-if="iconType.img" :src="`/static/home/${iconType.img}.png`" mode="widthFix"></image>
			</view>
			<view>测量</view>
		</view>
		<view class="item" @tap="record">
			<view class="icon" :class="[iconType.cls]">
				<image src="/static/record.png" mode="widthFix"></image>
			</view>
			<view>历史记录</view>
		</view>
	</view>
</template>

<script>
import { mapState, mapMutations } from 'vuex';
export default {
	data() {
		return {};
	},
	props: {
		deviceTypeCode: {
			type: String,
			default: ''
		}
	},
	computed: {
		...mapState(['devicelist', 'userInfo']),
		iconType() {
			let cls = '',
				img = '';
			switch (this.deviceTypeCode) {
				case 'F2Pro':
					cls = 'icon1';
					img = 'icon01';
					break;
				case 'BP2A':
					cls = 'icon2';
					img = 'icon02';
					break;
				case 'O2':
					cls = 'icon3';
					img = 'icon03';
					break;
				default:
					break;
			}
			return {
				cls,
				img
			};
		}
	},
	methods: {
		...mapMutations(['$uStore']),
		deviceTest() {
			this.$Router.pushTab({
				path: '/pages/device/list'
			});
		},
		record() {
			let path = '';
			switch (this.deviceTypeCode) {
				case 'O2': {
					path = '/pages/count/o2list';
					break;
				}
				case 'BP2A': {
					path = '/pages/count/bp2list';
					break;
				}
				case 'F2Pro': {
					path = '/pages/count/f2list';
					break;
				}
				case 'ER': {
					path = '/pages/count/erdevice';
					break;
				}
			}
			if (path) {
				this.$Router.push({
					path: path
				});
			}
		}
	}
};
</script>

<style scoped lang="scss">
.footerbar {
	background: #fff;
	padding: 20upx 0;
	box-shadow: 0 -1upx 6upx rgba(0, 0, 0, 0.1);
	position: relative;
	z-index: 99;
	.item {
		flex: 1;
		text-align: center;
		.icon {
			text-align: center;
			border-radius: 100%;
			height: 50upx;
			width: 50upx;
			margin: 10upx auto;
			display: flex;
			align-items: center;
			justify-content: center;

			image {
				display: block;
				width: 35upx;
				height: 35upx;
			}

			&.icon1 {
				background: #00cca9;
			}

			&.icon2 {
				background: #ff5949;
			}

			&.icon3 {
				background: #fe3770;
			}

			&.icon4 {
				background: #fd7c1e;

				image {
					display: block;
					width: 30upx;
					height: 30upx;
				}
			}

			&.icon5 {
				background: #d0425a;
			}
		}
	}
}
</style>
